<!-- 头像 -->
<template>
	<div class="page">
		<img src="./avatar.png" />
	</div>
</template>

<script setup name="avatarComponent"></script>

<style lang="less" scoped>
	img {
		--size: 280px;
		/* 头像的尺寸 */
		--borderWidth: 5px;
		/* 头像外边框的宽度 */
		--borderColor: #c02942;
		/* 头像边框的颜色*/
		width: var(--size);
		aspect-ratio: 1;
		/* 头像的宽高比，这里是1：1，也是就现在头像是正方形 */
		padding-top: calc(var(--size) / 5);
		cursor: pointer;
		border-radius: 0 0 calc(var(--size) / 2) calc(var(--size) / 2);
		outline: var(--borderWidth) solid var(--borderColor);
		--f: 1;
		/* 初始化大小*/
		--_g: 50% / calc(100% / var(--f)) 100% no-repeat content-box;
		--_o: calc((1 / var(--f) - 1) * var(--size) / 2 - var(--borderWidth));

		background: radial-gradient(
				circle closest-side,
				#ecd078 calc(99% - var(--borderWidth)),
				var(--borderColor) calc(100% - var(--borderWidth)) 99%,
				#0000
			)
			var(--_g);

		outline-offset: var(--_o);
		-webkit-mask:
			linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) /
				calc(100% / var(--f) - 2 * var(--borderWidth) - 2px) 50%,
			radial-gradient(circle closest-side, #000 99%, #0000) var(--_g);
		transform: scale(var(--f));
		transition: 0.5s;
	}
	img:hover {
		--f: 1.35;
	}
</style>
